<template>
  <div>
    <header class="top_wrap">
      <div>
        <img
          :src="
            this.$isEmpty(topicData.picurl2)
              ? topicData.picurl
              : topicData.picurl2
          "
          class="top_wrap__bg"
          alt="歌单封面"
        />
      </div>
    </header>

    <div class="opt_box">
      <div class="author">
        <header class="author__hd">
          <img
            class="author__avatar"
            src="//y.gtimg.cn/mediastyle/mod/mobile/img/logo.svg?max_age=2592000"
          />
          <h6 class="author__name">QQ音乐官方歌单</h6>
        </header>
        <p class="author__desc">
          {{ topicData.desc }}
        </p>
      </div>
      <div class="play_bar_wrap">
        <div class="play_bar">
          <a class="play_all" @click="payAll"
            ><i class="play_all__icon"></i
            ><span class="play_all__text">播放全部</span></a
          >
          <a class="collect" href="javascript:;">
            <van-icon
              name="like-o"
              class="collect__icon icon_svg"
              size="22px"
            />
            收藏歌单</a
          >
        </div>
      </div>
      <!-- 列表 -->
      <div>
        <ul class="qui_list">
          <li
            v-for="item in topicData.songlist"
            :key="item.id"
            class="qui_list__item"
          >
            <div class="qui_list__bd" @click="toSong(item)">
              <div class="qui_list__box">
                <h3 class="qui_list__tit">
                  <span class="qui_list__txt">{{ item.name }}</span>
                </h3>
                <p class="qui_list__desc">
                  <span class="qui_list__txt">{{
                    item.singer[0].title + " · " + item.album.title
                  }}</span>
                </p>
              </div>
            </div>
            <a class="song_list__ctrl">
              <li
                class="el-icon-download"
                style="font-size: 20px"
                @click="down(item)"
              ></li>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 最顶层的样式有点问题  todo -->
        <van-overlay :show="loading" >
      <van-loading size="24px" class="center" color="#1989fa">加载中...</van-loading>
    </van-overlay>
  </div>
</template>

<script>
import { getRecommendTopic } from "@/api/recommend";
import { getSongsDetail } from "@/api/songs.js";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
       loading:false,
      seoData: {},
      topicData: {},
    };
  },
  computed:{
      ...mapState({
      song: "song",
    }),
  },
  methods: {
    ...mapMutations(["changeMusicUrl", "changeHeaderShow", "addSongs"]),
    toSong(item) {
      this.$router.push({ path: "/SongDetail?id=" + item.mid });
    },
    down(song) {
      window.location.href =
        "/reptile/DownMusicFile?mid=" +
        song.mid +
        "&name=" +
        song.name +
        "-" +
        song.singer[0].name;
    },
    payAll() {
      //播放全部音乐
      //console.log('音乐列表',this.topicData.songlist)
      let songMids = this.topicData.songlist.map((a) => {
        return a.mid;
      });
        this.loading=true;
      getSongsDetail(songMids).then(res=>{
        console.log('多个请求',res);
        this.addSongs({songs:res});
        this.loading=false;
         this.$router.push({path:'/SongDetail?id='+res[0].songmid})
      })
    },
  },
  created() {
    //回退的时候样式有问题
    const id = this.$route.query.id;
    this.changeHeaderShow({ showTabs: false }); //头部隐藏
    getRecommendTopic(id).then((res) => {
      const { seodata, taogeData } = res.data;
      this.seoData = seodata;
      this.topicData = taogeData;
    });
  },
};
</script>

<style>
@import url("https://y.gtimg.cn/mediastyle/mobile/app/share/official_gedan_668c7a0a.css?max_age=2592000");
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
</style>